<!--
 * @Author: fishroom
 * @Date: 2021-08-23 00:01:11
 * @LastEditTime: 2021-08-30 13:02:44
 * @FilePath: \backstage\src\components\common\swiper\Slides.vue
-->
<template>
  <div>
    <swiper class="swiper-container" :options="swiperOption">
      <swiper-slide v-for="(item, index) in itemList" :key="index">
        <div class="slide-img">
          <img class="slide-inner" :src="item" alt="" />
        </div>
      </swiper-slide>
      <div class="swiper-pagination " slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "Slides",
  props: {
    itemList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      interleaveOffset: 0.5,
      swiperOption: {
        notNextTick: true,
        //循环

        loop: true,
        speed: 1000,
        grabCursor: true,
        watchSlidesProgress: true,
        mousewheelControl: true,
        keyboardControl: true,
        //设定初始化时slide的索引
        initialSlide: 0,
        //自动播放
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 设置轮播
        effect: "flip",

        paginationClickable: true,
        // 控制分页器点击事件
        clickable: true,
        // 触发距离比例
        longSwipesRatio: 0.1,
        //分页器设置
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          bulletClass: "index-lot", //需设置.my-bullet样式
          bulletActiveClass: "index-lot-active"
        },
        //滑动之后回调函数
        on: {
          progress: function() {
            var swiper = this;
            for (var i = 0; i < swiper.slides.length; i++) {
              var slideProgress = swiper.slides[i].progress;
              var innerOffset = swiper.width * this.interleaveOffset;
              var innerTranslate = slideProgress * innerOffset;
              swiper.slides[i].querySelector(".slide-inner").style.transform =
                "translate3d(" + innerTranslate + "px, 0, 0)";
            }
          },
          touchStart: function() {
            var swiper = this;
            for (var i = 0; i < swiper.slides.length; i++) {
              swiper.slides[i].style.transition = "";
            }
          },
          setTransition: function(speed) {
            var swiper = this;
            for (var i = 0; i < swiper.slides.length; i++) {
              swiper.slides[i].style.transition = speed + "ms";
              swiper.slides[i].querySelector(".slide-inner").style.transition =
                speed + "ms";
            }
          }
        }
      }
    };
  }
};
</script>

<style lang="scss">
.slide-img {
  display: flex;
  width: 100%;
  min-height: 400px;
  max-height: 400px;
  background-color: antiquewhite;

  img {
    flex: 1;
  }
}

.index-lot {
  width: 5vw;
  height: 1vh;
  margin-right: 5px;
  display: inline-block;
  border-radius: 5px;
  background: #000;
  opacity: 0.2;
  cursor: pointer;
}

.index-lot-active {
  background-color: #fff;
  opacity: 1;
}

.slide-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center;
}
</style>
